<template>
	<navigator url="../../pages/CheHistory/CheHistory">
	<uni-section title="车辆进出流量(24h)" type="line" style="margin-bottom: 3px;">
		<image src="../../static/mipmap-xxxhdpi/icon_next.png" mode=""
			style="width: 20rpx;height: 30rpx;float: right;margin-top: -23px;margin-right: 5px;"></image>
		<span>历史记录</span>
	</uni-section>
	</navigator>
	<div class="charts-box">
		<qiun-data-charts type="tarea" :opts="opts" :chartData="chartData" />
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		Solar
	} from '@/utils/file.js';
	const chartData = ref({});
	 const opts = ref({
		color: ["#0a4afa", "#f5e353", "#FAC858", "#d1d92b", "#d7de47", "#a29f3d"
		],
        padding: [15, 15, 0, 15],
		dataLabel: false,  //取消数字
		dataPointShape: false,  //取消折现点
		enableScroll: false,
		dataPointShapeType: "solid",
		legend: {},
		xAxis: {
			disableGrid: true,
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2,
			data:[],
			splitNumber: 6
		},
		extra: {
			area: {
				type: "curve",
				opacity: 0.4,
				addLine: true,
				width: 2,
				gradient: false,
				activeType: "hollow"
			}
		}
	});
	const getServerData = () => {
		Solar(uni.getStorageSync('token')).then(res => {
			console.log(res,"车辆进出");
 
			// 模拟从服务器获取数据时的延时
			setTimeout(() => {
				// 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let car = res.data.car_result.data.map(item=>item.in)
			let max = Math.max(...car)
				let data = {
					categories: res.data.car_result.data.map(item=>item.car_time),
					series: [{
							name: "进",
							data: res.data.car_result.data.map(item=>item.in)
						},
						{
							name: "出",
							data: res.data.car_result.data.map(item=>item.out)
						}
					]
				};
				opts.value.yAxis.data = [{
				  min: 0,
				  max: Math.ceil(max)
				}];
				chartData.value = JSON.parse(JSON.stringify(data));
			}, 500);
		})
	};

	onMounted(getServerData);
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 230px;
	}
	span {
		display: inline-block;
		float: right;
		margin-right: 20px;
		margin-top: -24px;
	}
</style>